<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>Ecosystem</h3>
    <ul>
      <li v-for="item in list" :key="item">
        <button>{{ item }}</button>
      </li>
    </ul>
    <h3>users</h3>
    <div
        style="background-color: #42b983;"
        v-for="user in users" :key="user.productsId">
      <p>商品名称:{{ user.productsName }}</p>
      <p>商品品牌:{{ user.productsBrands }}</p>
      <p>商品价格:{{ user.productsPrice }}</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'HelloWorld',
  data() {
    return {
      list: ["1", "2", "3", "4"],
      users: []
    }
  },
  props: {
    msg: String
  },
  mounted() {
    console.log('Component mounted.')
    this.loadAllUser()
  },
  methods: {
    loadAllUser() {
      console.log('loadAllUser.')
      let url = "https://youxuan-zua-api.tulan.wang/admin/ysf-products/page"
      axios.get(url).then(res => {
        let result = res.data;
        console.log(result)
        this.users = result.data;
        console.log(this.users)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
